<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"></meta>
<title>websocket集群</title>
</head>
<body>
	本服务端口号：[[${port}]]，使用redismq实现websocket集群<br/>
	[[${topic}]] 频道 聊天中。。。<br/>
	toid:<input id="to_id" type="text" />
	message:<input id="input_id" type="text" /><button onclick="sendMessage()">发送</button>
	<button onclick="closeWebsocket()">关闭</button>
	<div id="message_id"></div>
</body>
<script type="text/javascript">
	document.getElementById('input_id').focus();
	var websocket = null;
	//当前浏览前是否支持websocket
	if("WebSocket" in window){
		//var url = "ws://127.0.0.1:[[${port}]]/websocket/[[${topic}]]/[[${myname}]]";
        var url = "ws://127.0.0.1:[[${port}]]/websocket/[[${myname}]]";
		websocket = new WebSocket(url);
	}else{
		alert("浏览器不支持websocket");
	}
	
	websocket.onopen = function(event){
		setMessage("打开连接");
	}
	
	websocket.onclose = function(event){
		setMessage("关闭连接");
	}
	
	websocket.onmessage = function(event){
		setMessage(event.data);
	}
	
	websocket.onerror = function(event){
		setMessage("连接异常");
	}
	
	//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
    	closeWebsocket();
    }
	
	//关闭websocket
	function closeWebsocket(){
		//3代表已经关闭
		if(3!=websocket.readyState){
			websocket.close();
		}else{
			alert("websocket之前已经关闭");
		}
	}
	
	//将消息显示在网页上
    function setMessage(message){
        document.getElementById('message_id').innerHTML += message + '<br/>';
    }
	 
	//发送消息
	function sendMessage(){
		//1代表正在连接
		if(1==websocket.readyState){
			//var message = document.getElementById('input_id').value;
			//setMessage(message);
            var message = {
                "sendId":[[${myname}]],
                "message":document.getElementById('input_id').value,
                "toId":document.getElementById('to_id').value
            };
            websocket.send(JSON.stringify(message));

			//websocket.send(message);
		} else {
			alert("websocket未连接");
		}
		document.getElementById('input_id').value="";
		document.getElementById('input_id').focus();
	}
</script>
</html>